<template>
	<view style="width: 660rpx;margin:0 auto;overflow: hidden;">
		<view class="title">臭宝惩罚器1.0</view>
		<view class="grid" v-if="activeTabbar === 0">
			<view v-for="item in grids" :key="item" class="grid-item" :style="{ width: 100 / column + '%' }">
				<view class="grid-item-inner" :style="{
					width: item === -1 ? centerSize.column * 100 + '%' : '',
					height: item === -1 ? centerSize.row * 100 + '%' : '',
				}">
					<view v-if="item > -1" :class="['prize-item', { active: item === activeIndex }]">
						<view class="prize-icon">
							<sar-icon family="icons" :name="prizes[item]?.icon" />
						</view>
						<view class="prize-name">{{ prizes[item]?.name }}</view>
					</view>
					<view v-else-if="item === -1" class="play-btn" @click="onPlay()">
						点我抽奖
					</view>
				</view>
			</view>
		</view>

		<view v-else class="disc">
			<view class="sectors" :style="{
				backgroundImage: repeatingConicGradient,
				transform: `rotate(${degrees}deg)`,
			}">
				<view v-for="(prize, index) in prizes" :key="prize.id" class="sector"
					:class="{ 'sector-event': index % 2 === 0 }" :style="{
						transform: `rotate(${-index * sectorDegrees}deg)`,
					}">
					<view class="sector-half">
						<view class="prize-icon">
							<sar-icon family="icons" :name="prize.icon" size="40rpx" />
						</view>
						<view class="prize-name">{{ prize.name }}</view>
					</view>
				</view>
			</view>
			<view class="play-btn" @click="onPlay1">
				<text>点我抽奖</text>
				<view class="play-btn-arrow"></view>
			</view>
		</view>

		<up-tabbar :value="activeTabbar" @change="tabbarChange" :fixed="true" :placeholder="false"
			:safeAreaInsetBottom="false">
			<up-tabbar-item text="宫格" :name="0" icon="../../static/cell_active.png"></up-tabbar-item>
			<up-tabbar-item text="转盘" :name="1" icon="../../static/turntable_active.png"></up-tabbar-item>
		</up-tabbar>

		<sar-dialog v-model:visible="dialogVisible" :show-cancel="false" confirm-text="收下">
			<view v-if="winningPrize" class="dialog-prize">
				<view class="dialog-prize-icon">
					<sar-icon family="icons" :name="winningPrize.icon" />
				</view>
				<view class="dialog-prize-title">
					<text>恭喜你抽中</text>
					<text class="dialog-prize-name">“{{ winningPrize.name }}”</text>
				</view>
			</view>
		</sar-dialog>
	</view>
</template>

<script setup lang="ts">
import { useLuckyGrid, getGridPrizeCount, useLuckyWheel } from 'sard-uniapp'
import { computed, ref } from 'vue'
import { getPrizeApi, getPrizes, type Prize } from './utils'

const row = ref(4)
const column = ref(5)
const prizes = computed(() => {
	return getPrizes().slice(0, getGridPrizeCount(row.value, column.value))
})
const winningPrize = ref<Prize>()
const dialogVisible = ref(false)

// 底部导航
const activeTabbar = ref(0)
const tabbarChange = (index: number) => {
	activeTabbar.value = index
}
const { grids, activeIndex, centerSize, play, stop, pause } = useLuckyGrid({
	row,
	column,
	complete: (index) => {
		winningPrize.value = prizes.value[index]
		dialogVisible.value = true
	},
})

const onPlay = () => {
	console.log(grids.value);
	console.log(centerSize.value);

	play()
	getPrizeApi(getGridPrizeCount(row.value, column.value))
		.then((prize) => {
			stop(prizes.value.findIndex((item) => item.id === prize.id))
		})
		.catch(() => pause())
}


const { degrees, sectorDegrees, play: play1, stop: stop1, pause: pause1 } = useLuckyWheel({
	count: computed(() => prizes.value.length),
	complete: (index) => {
		winningPrize.value = prizes.value[index]
		dialogVisible.value = true
	},
})

const repeatingConicGradient = computed(() => {
	const angle = sectorDegrees.value
	return (
		`repeating-conic-gradient(` +
		`var(--sector-bg) ${-angle / 2}deg, var(--sector-bg) ${angle / 2}deg,` +
		`transparent ${angle / 2 + 0.5}deg, transparent ${angle / 2 + angle}deg,` +
		`var(--sector-bg) ${angle / 2 + angle + 0.5}deg)`
	)
})
const onPlay1 = () => {
	play1()
	getPrizeApi(8)
		.then((prize) => {
			stop1(prizes.value.findIndex((item) => item.id === prize.id))
		})
		.catch(() => pause1())
}
</script>

<style lang="scss" scoped>
.title {
	margin: 10px auto;
	padding: 10px 3px;
	border-radius: 10px;
	text-align: center;
	background-color: rgb(247, 247, 247);
}

.btns {
	margin-top: 10px;
}

// 宫格
.grid {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	width: 660rpx;
	height: auto;
	margin: 0 auto;
	padding: 10rpx;
	border: 10rpx solid #ffddcf;
	border-radius: 32rpx;
	background-color: #fffbef;

	.grid-item {
		position: relative;
		box-sizing: border-box;
		width: 33.3333%;
	}

	.grid-item-inner {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 10rpx;
	}

	.prize-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		background-color: #fff0cb;
		border: 2rpx solid rgba(0, 0, 0, 0.02);
		box-shadow: inset 0 -6rpx 0 rgba(0, 0, 0, 0.1);

		&.active {
			background-color: #ffd166;
		}
	}

	.prize-icon {
		font-size: 48rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.prize-name {
		text-align: center;
		padding: 2px;
		margin-top: 12rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #eb7e50;
		line-height: 32rpx;
		height: 64rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.play-btn {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		font-weight: 500;
		color: #fff;
		background-color: #f02020;
		box-shadow: inset 0 -6rpx 0 rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}

}



// 转盘
.disc {
	position: relative;
	box-sizing: border-box;
	width: 660rpx;
	height: 660rpx;
	margin: 0 auto;
	border: 10rpx solid #ffddcf;
	border-radius: 50%;
	overflow: hidden;
	--sector-bg: #fff0cb;

	.sectors {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #fffbef;
	}

	.sector {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.sector-half {
		box-sizing: border-box;
		width: 100%;
		height: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.prize-icon {
		margin-top: 2rpx;
		font-size: 72rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.prize-name {
		text-align: center;
		padding: 0 5px;
		margin-top: 3rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #eb7e50;
		line-height: 28rpx;
		width: 10%;

	}

	.play-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 160rpx;
		height: 160rpx;
		border: 8rpx solid #fff;
		border-radius: 50%;
		font-weight: 500;
		color: #fff;
		background-color: #f02020;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}

	.play-btn-arrow {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%) scaleX(0.4);

		&::before {
			content: '';
			display: flex;
			width: 60rpx;
			height: 60rpx;
			background-color: #f02020;
			transform: rotate(45deg);
		}
	}


}

.dialog-prize {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 60rpx 0;
}

.dialog-prize-icon {
	font-size: 160rpx;
	text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.dialog-prize-title {
	margin-top: 32rpx;
	font-size: 32rpx;
	line-height: 32rpx;
}

.dialog-prize-name {
	color: #eb7e50;
	font-weight: 600;
}
</style>